﻿<div class="text-center d-flex align-center justify-space-around">
    <MTooltip Left>
        <ActivatorContent>
            <MButton Color="primary" Dark @attributes="@context.Attrs">Left</MButton>
        </ActivatorContent>
        <ChildContent>
            <span>Left tooltip</span>
        </ChildContent>
    </MTooltip>

    <MTooltip Top>
        <ActivatorContent>
            <MButton Color="primary" Dark @attributes="@context.Attrs">Top</MButton>
        </ActivatorContent>
        <ChildContent>
            <span>Top tooltip</span>
        </ChildContent>
    </MTooltip>

    <MTooltip Bottom>
        <ActivatorContent>
            <MButton Color="primary" Dark @attributes="@context.Attrs">Bottom</MButton>
        </ActivatorContent>
        <ChildContent>
            <span>Bottom tooltip</span>
        </ChildContent>
    </MTooltip>

    <MTooltip Right>
        <ActivatorContent>
            <MButton Color="primary" Dark @attributes="@context.Attrs">Right</MButton>
        </ActivatorContent>
        <ChildContent>
            <span>Right tooltip</span>
        </ChildContent>
    </MTooltip>
</div>